When a service is running or terminated, I need to modify the status in a dropdown menu. It uses Angular's "select" and uses GraphQL to access data. Here is a snippet of my code.
header.html
<li ng-hide="!vm.isAdmin">
<div class="form-group" style="margin-bottom: 0;">
<select class="form-control input-sm"
ng-model="vm.currentServiceName"
ng-change="vm.onServiceChange()"
ng-options="item.database as item.code group by item.group for item in vm.services | orderBy:['-group','code']"></select>
</div>
</li>
headerController.js
static mapState = (state) => {
const services = getVirtualServices(state)
return {
isAdmin: authSelectors.isAdmin(state),
services: map(services, s => ({ ...s, group: (s.isActive ? 'en' : 'dis') + 'abled' })),
currentServiceName: authSelectors.getCurrentService(state),
}
selector.ts
export const getVirtualServices = (state: StoreShape) => getState(state).services.items
type.ts
export type InstanceInfoStoreShape = {
services: {
isLoading: boolean
error: ApiExceptionData | null
items: VirtualService[]
}`
interface VirtualService {
code: string
database: string
isActive: boolean
status: boolean
}
`
VirtualServicesStatus code in GraphQL type.ts
export enum VirtualServiceStatus {
Ready = 'READY',
Initialisation = 'INITIALISATION',
Processing = 'PROCESSING',
Stopping = 'STOPPING',
Stopped = 'STOPPED',
Faulted = 'FAULTED'
}